<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue'

const props = defineProps({
  msg: String,
  data: {
    type: Object,
    required: true
  }
})
console.log('props=>data', props.data)
// 1.初始化echarts实例
let myChart = null
const targetV = ref(null)

onMounted(() => {
  myChart = echarts.init(targetV.value)
  renderChart()
})

// 2.构建option配置对象
const renderChart = () => {
  const options = {
    radar: {
      name: {
        textStyle: {
          color: '#05D5FF',
          fontSize: 14
        }
      },
      shape: 'polygon',
      center: ['50%', '50%'],
      radius: '80%',
      startAngle: 120,
      axisLine: {
        lineStyle: {
          color: 'rgba(5,213,255,.8)'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: 'rgba(5,213,255,.8)'
        }
      },
      indicator: props.data.map(item => ({
        name: item.name,
        max: 100
      }))
    },
    // 坐标极点
    polar: {
      center: ['50%', '50%'],
      radius: '0%'
    },
    // 坐标角度
    angleAxis: {
      min: 0,
      max: 360,
      interval: 5,
      clockwise: false,
    },
    //   径向轴
    radiusAxis: {
      min: 0,
      interval: 20,
      splitLine: {
        show: true
      }
    },
    series: [
      {
        type: 'radar',
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          normal: {
            color: '#05D5FF'
          }
        },
        areaStyle: {
          normal: {
            color: '#05D5FF',
            width: 2
          }
        },
        label: {
          normal: {
            show: true,
            color: '#fff'
          }
        },
        data: [
          {
            value: props.data.map(item => item.value)
          }
        ]
      }
    ]
  }
  // 3. 通过实例setOptions(options)
  myChart.setOption(options)
}

watch(
  () => props.data,
  () => { renderChart() }
)
</script>

<template>
  <div>
    <div>【云端报警风险】</div>
    <!-- bg-[#38bdf8]" -->
    <div ref="targetV" class="w-full h-full"></div>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
